@import '../../../themes/basic/base-all.less';
@import '../../../themes/basic/compnent-container-border.less';
@import '../../../date/lib/src/date-common.less';

ti-drop.ti3-date-range-picker {
  --ti-date-picker-padding-horizon: var(--ti-common-space-4x);
  --ti-date-picker-line-width: 1px;
  --ti-date-picker-line-color: var(--ti-common-color-line-dividing);
}
:host {
  --ti-date-range-input-width: 240px;
}
:host.ti3-date-range-input-container :extend(.ti3-compnent-container-border all) {
  width: var(--ti-date-range-input-width);
}

.ti3-dropdown-container.ti3-date-range-picker {
  padding: var(--ti-common-space-3x) var(--ti-date-picker-padding-horizon);
  font-size: var(--ti-common-font-size-base);
  z-index: 10002;

  &:focus {
    outline: 0px;
  }
}

.ti3-date-range-edit {
  display: inline-block;
  width: calc(var(--ti-common-size-9x) * 7 - 4px);
}
::ng-deep .ti3-date-range-end-edit,
::ng-deep .ti3-date-range-begin-edit {
  input[tiText] {
    border-color: var(--ti-common-color-line-active) !important;
  }
}
.ti3-date-range-customize-container {
  float: left;
  padding-right: var(--ti-common-space-4x);
  margin-right: var(--ti-common-space-4x);
  width: var(--ti-common-size-20x);
  border-right: var(--ti-date-picker-line-width) var(--ti-common-border-style-solid) var(--ti-date-picker-line-color);
}

::ng-deep :root .ti3-date-picker-footer-right {
  margin-top: var(--ti-common-space-3x);
  padding-top: var(--ti-common-space-3x);
  border-top: var(--ti-date-picker-line-width) var(--ti-common-border-style-solid) var(--ti-date-picker-line-color);
  width: 100%;
}
.ti3-date-picker-footer-btn {
  float: right;
}
